<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react操作DOM的核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、当需要书写JSX结构的时候，引入babel文件-->
    <script src="./js/babel.min.js"></script>
    <style>
        header {
            width: 100%;
            height: 100px;
            background: red;
            margin-bottom: 10px;
        }

        main {
            width: 100%;
            height: 100px;
            background: orangered;
            margin-bottom: 10px;
        }

        footer {
            width: 100%;
            height: 100px;
            background: purple;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--
          类式组件实例化对象身上有一些属性比较常用
          state(状态)
    -->
    <!--5、设置script标签中内容类型为:text/babel-->
    <script type="text/babel">
        //6、创建容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //解构
        const { Component } = React;

        //7、创建类式组件
        class App extends Component {
            //想要在组件实例化对象身上初始一些属性
            //方法1：直接赋值
            //state属性表示就是默认组件实例化对象身上的属性，相当于重新赋值
            //初始化
            /* state = {
                //属性名自定义，属性值一般来说布尔值、字符串、数值、数组都很常用
                isGood: false
            } */
            constructor() {
                super();
                console.log('构造器...')
                //构造器里面的this指向组件实例化对象
                this.state = {
                    isGood: false
                }
            }
            render() {
                //只要写的是类式组件，想要定义一些可以变化的数据，只要是频繁发生变化的数据，一般都会定义在状态里面
                //状态是所属于组件实例化对象的
                // console.log(this.state);
                console.log('render....')
                //对象解构
                //读取
                let { isGood } = this.state;
                return <div>
                    <p>今天的天气{isGood ? '好' : '不好'}</p>
                    <button onClick={() => {
                        //state状态不能直接更新,必须要通过一个方法，setState()
                        //更改
                        this.setState({
                            isGood: !isGood
                        })
                    }}>修改状态</button>
                </div>
            }
        }
        console.dir(Component);
        //8、渲染
        root.render(<App />); //相当于 let a1 = new App
    </script>
</body>

</html>